<template>
    <!-- ytq -->
    <div class="addProduct">
        <div class="breadcrumb">
            <Breadcrumb :aaa='aaa' :msgg="msg" :txt="txt" :path1="path1" />
        </div>

        <div class="form-container">
            <!-- 退货商品 -->
            <el-card>
                <div class="el-card__body el-card__body1" v-for="item in returnArr" :key="item.id">
                    <div class="title">退货商品</div>
                    <el-table :data="returnArr" border style="width: 100%;margin-top: 15px;">
                        <el-table-column label="商品图片">
                            <img :src="item.productPic" alt="" width="80">
                        </el-table-column>
                        <el-table-column prop='productName' label="商品名称" width="160"></el-table-column>
                        <el-table-column prop="productId" label="货号" />
                        <el-table-column prop="productAttr" label="属性" />
                        <el-table-column prop="productCount" label="数量" />
                        <el-table-column prop="productRealPrice" label="小计" />
                    </el-table>
                    <div class="right">合计:￥<span style="color:red">{{ item.productRealPrice }}</span></div>
                </div>
            </el-card>

            <!-- 服务单信息 -->
            <el-card style="margin-top: 20px;">
                <div class="el-card__body el-card__body2" v-for="item in serviceArr" :key="item.id">
                    <div class="title">服务单信息</div>
                    <div class="el-card__body-service">
                        <div data-v-64db1613="" class="form-container-border">
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">服务单号
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">{{ item.id }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">申请状态
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">{{ item.status }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6"
                                    style="height: 50px; line-height: 30px;">订单编号 </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18"
                                    style="height: 50px;">
                                    {{ item.orderSn }} <button data-v-64db1613="" type="button"
                                        class="el-button el-button--text el-button--small"><!----><!----><span>查看</span></button>
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">申请时间
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{
                                        item.createTime
                                        ? dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                                        : "/"
                                    }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">用户账号
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.memberUsername }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">联系人
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.returnName }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">联系电话
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.returnPhone }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">退货原因
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">{{ item.reason }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">问题描述
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.description }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6"
                                    style="height: 100px; line-height: 80px;">凭证图片 </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18"
                                    style="height: 100px;"><img data-v-64db1613="" :src="item.productPic"
                                        style="width: 80px; height: 80px;"></div>
                            </div>
                        </div>
                        <div data-v-64db1613="" class="form-container-border">
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">订单金额
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">￥{{ item.
                                    productRealPrice }}</div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6"
                                    style="height: 52px; line-height: 32px;">确认退款金额 </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18"
                                    style="height: 52px;"> ￥{{ item.returnAmount }} <div data-v-64db1613=""
                                        class="el-input el-input--small is-disabled"
                                        style="width: 200px; margin-left: 10px;"><!----><input type="text"
                                            disabled="disabled" autocomplete="off"
                                            class="el-input__inner"><!----><!----><!----><!----></div>
                                </div>
                            </div>
                            <div data-v-64db1613="">
                                <div data-v-64db1613="" class="el-row">
                                    <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6"
                                        style="height: 52px; line-height: 32px;">选择收货点 </div>
                                    <div data-v-64db1613="" class="form-border font-small el-col el-col-18"
                                        style="height: 52px;">
                                        <div data-v-64db1613="" class="el-select el-select--small" style="width: 200px;">
                                            <!---->
                                            <div class="el-input el-input--small is-disabled el-input--suffix"><!----><input
                                                    type="text" disabled="disabled" readonly="readonly" autocomplete="off"
                                                    placeholder="请选择" class="el-input__inner"><!----><span
                                                    class="el-input__suffix"><span class="el-input__suffix-inner"><i
                                                            class="el-select__caret el-input__icon el-icon-arrow-up"></i><!----><!----><!----><!----><!----></span><!----></span><!----><!---->
                                            </div>
                                            <div class="el-select-dropdown el-popper"
                                                style="display: none; min-width: 200px;">
                                                <div class="el-scrollbar" style="">
                                                    <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                                        style="margin-bottom: -21px; margin-right: -21px;">
                                                        <ul class="el-scrollbar__view el-select-dropdown__list"><!---->
                                                            <li data-v-64db1613="" class="el-select-dropdown__item">
                                                                <span>深圳发货点</span>
                                                            </li>
                                                            <li data-v-64db1613=""
                                                                class="el-select-dropdown__item selected"><span>北京发货点</span>
                                                            </li>
                                                            <li data-v-64db1613="" class="el-select-dropdown__item">
                                                                <span>南京发货点</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="el-scrollbar__bar is-horizontal">
                                                        <div class="el-scrollbar__thumb" style="transform: translateX(0%);">
                                                        </div>
                                                    </div>
                                                    <div class="el-scrollbar__bar is-vertical">
                                                        <div class="el-scrollbar__thumb" style="transform: translateY(0%);">
                                                        </div>
                                                    </div>
                                                </div><!---->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-v-64db1613="" class="el-row">
                                    <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">
                                        收货人姓名</div>
                                    <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                        {{ item.returnName }}
                                    </div>
                                </div>
                                <div data-v-64db1613="" class="el-row">
                                    <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">所在区域
                                    </div>
                                    <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                        {{ item.companyAddress.province }} {{ item.companyAddress.region }}
                                    </div>
                                </div>
                                <div data-v-64db1613="" class="el-row">
                                    <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">详细地址
                                    </div>
                                    <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                        {{ item.companyAddress.detailAddress }}
                                    </div>
                                </div>
                                <div data-v-64db1613="" class="el-row">
                                    <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">联系电话
                                    </div>
                                    <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                        {{ item.companyAddress.phone }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-v-64db1613="" class="form-container-border">
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">处理人员
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.receiveMan }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">处理时间
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18"> {{
                                    item.handleTime
                                    ? dayjs(item.handleTime).format("YYYY-MM-DD HH:mm:ss")
                                    : "/"
                                }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">处理备注
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.handleNote }}
                                </div>
                            </div>
                        </div>
                        <div data-v-64db1613="" class="form-container-border" style="">
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">收货人员
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.receiveMan }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">收货时间
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.receiveTime }}
                                </div>
                            </div>
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6">收货备注
                                </div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    {{ item.receiveNote }}
                                </div>
                            </div>
                        </div>
                        <div data-v-64db1613="" class="form-container-border" style="display: none;">
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6"
                                    style="height: 52px; line-height: 32px;">处理备注</div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    <div data-v-64db1613="" class="el-input el-input--small"
                                        style="width: 200px; margin-left: 10px;">
                                        <!----><input type="text" autocomplete="off"
                                            class="el-input__inner"><!----><!----><!----><!---->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-v-64db1613="" class="form-container-border" style="display: none;">
                            <div data-v-64db1613="" class="el-row">
                                <div data-v-64db1613="" class="form-border form-left-bg font-small el-col el-col-6"
                                    style="height: 52px; line-height: 32px;">收货备注</div>
                                <div data-v-64db1613="" class="form-border font-small el-col el-col-18">
                                    <div data-v-64db1613="" class="el-input el-input--small"
                                        style="width: 200px; margin-left: 10px;">
                                        <!----><input type="text" autocomplete="off"
                                            class="el-input__inner"><!----><!----><!----><!---->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-v-64db1613="" style="margin-top: 15px; text-align: center; display: none;"><button
                                data-v-64db1613="" type="button"
                                class="el-button el-button--primary el-button--small"><!----><!----><span>确认退货</span></button><button
                                data-v-64db1613="" type="button"
                                class="el-button el-button--danger el-button--small"><!----><!----><span>拒绝退货</span></button>
                        </div>
                        <div data-v-64db1613="" style="margin-top: 15px; text-align: center; display: none;"><button
                                data-v-64db1613="" type="button"
                                class="el-button el-button--primary el-button--small"><!----><!----><span>确认收货</span></button>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onBeforeUnmount, shallowRef, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import useTable from "../../hooks/useTables";
import * as api from "../../request/api";
import { useRoute } from 'vue-router';
import dayjs from "dayjs";
import Breadcrumb from '../../components/breadcrumb.vue'
let msg = ref('退货申请详情')
let txt = ref('订单')
let path1 = ref('oms/order')
let aaa = ref(0)


//退货原因详情
const route = useRoute()
let id = route.query.id
let returnArr = reactive([])//退货商品数组
let serviceArr = reactive([])//服务单信息数组
let onOwn = async () => {
    let detailData = await api.returnApply.returnDetail({ id });
    returnArr.push(detailData)
    serviceArr.push(detailData)
}
onOwn()
console.log(returnArr)

</script>

 
<style lang="scss" scoped> .addProduct {
     background-color: white;
     height: 106vh !important;
 }

 .form-left-bg[data-v-64db1613] {
     background: #f2f6fc;
 }

 .form-border[data-v-64db1613] {
     border-right: 1px solid #dcdfe6;
     border-bottom: 1px solid #dcdfe6;
     padding: 10px;
 }

 .form-container-border[data-v-64db1613] {
     border-left: 1px solid #dcdfe6;
     border-top: 1px solid #dcdfe6;
     margin-top: 15px;
 }

 :deep .el-table thead {
     font-weight: bold !important;
 }

 .pagination {
     display: flex;
     justify-content: flex-end;
     margin-top: 15px;
 }


 :deep .el-table td.el-table__cell,
 :deep .el-table th.el-table__cell.is-leaf {
     border-bottom: var(--el-table-border);
     text-align: center !important;
 }

 .one {
     :deep .el-table .el-table__cell {
         color: #303133 !important;
         background: #f2f6fc;
         font-weight: 500 !important;
         text-align: center !important;
     }
 }

 .title {
     font-size: 16px;
 }

 .el-card__body1 {
     position: relative;
     height: 170px;
 }

 .right {
     font-size: 16px;
     margin-top: 10px;
     right: 0;
     position: absolute;
     height: 30px;
     line-height: 30px;
 }

 .el-card__body {
     padding: 0;
 }

 .el-input,
 .textarea {
     width: 340px;
 }

 .orderID {
     width: 240px;
 }

 .send {
     margin-left: 23px;
 }

 .form-container {
     left: 0;
     right: 0;
     width: 720px;
     padding: 27px 35px 15px 35px;
     margin: 20px auto;
     /* width: 50%; */
 }

 .addProduct {
     background-color: white;
     height: 100vh;
 }

 .input-with-select .el-input-group__prepend {
     background-color: var(--el-fill-color-blank);
 }

 .f {
     display: flex;
     justify-content: start;
     align-items: center;
     margin-bottom: 20px;
 }

 .el-input-group {
     width: 40%;
 }

 .breadcrumb {
     height: 45px;
     border-bottom: 1px solid #ebeef5;
     font-size: 20px;
 }

 .el-card.is-always-shadow {
     box-shadow: none;
 }




 .el-card {
     border-radius: 4px;
     border: 1px solid#ebeef5;
     background-color: #fff;
     overflow: hidden;
     color: #303133;
     transition: .3s;
 }
</style>